<template>
  <div class="create-reset">
    <div class="item">
      <div class="resetButton" @click="handleCreate">
        <div class="left">
          <div><van-icon name="add" /></div>
          <div class="text">创建预约</div>
        </div>
        <div>
          <van-icon name="arrow" />
        </div>
      </div>
      <div class="resetInfo" v-for="(item, index) in historyList" :key="index">
        <div class="itembox">
          <div class="deliveryContent">
            <div class="deliveryLeft">
              <div class="deliveryDate">{{ item.sendDate }}</div>
              <div class="deliveryDate">{{item.startSlot}}~{{item.endSlot}}</div>
              <div class="deliveryDate">
                <div>送货单数:</div>
                <div>{{ item.sendOrder }}</div>
              </div>
              <div class="deliveryDate">
                <div>送货件数:</div>
                <div>{{ item.sendCount }}</div>
              </div>
              <div class="deliveryDate">
                <div>货物类型:</div>
                <div>{{ item.goodsType | statusGoodstype(that) }}</div>
              </div>
            </div>
            <div class="deliveryLeft">
              <div class="deliveryDate carColor">{{ item.carNumber }}</div>
              <div class="deliveryDate carColor">
                <div>状态:</div>
                <div>{{ item.reservationStatus | Statustext }}</div>
              </div>
              <div class="deliveryDate carColor">
                <div>收货口:</div>
                <div>{{ item.reservationNum | statusReservationNum }}</div>
              </div>
              <div class="deliveryDate" v-if="item.reservationStatus == '1'">
                <div class="wait">前面还有:</div>
                <div class="wait">{{ ckwaitNum }}位</div>
              </div>
              <div class="deliveryDate" v-if="item.reservationStatus == '3'">
                <div class="wait">前面还有:</div>
                <div class="wait">{{ ytwaitNum }}位</div>
              </div>
            </div>
          </div>
          <!-- <div class="deliveryDate">
            <div>车牌号:</div>
            <div>{{ item.carNumber }}</div>
          </div>
          <div class="deliveryDate">
            <div>预约送货日期:</div>
            <div>{{ item.sendDate }}</div>
          </div>
          <div class="deliveryDate">
            <div>送货单数:</div>
            <div>{{ item.sendOrder }}</div>
          </div>
          <div class="deliveryDate">
            <div>送货件数:</div>
            <div>{{ item.sendCount }}</div>
          </div>
          <div class="deliveryDate">
            <div>货物类型:</div>
            <div>{{ item.goodsType | statusGoodstype(that) }}</div>
          </div>
          <div class="deliveryDate">
            <div>预约状态:</div>
            <div>{{ item.reservationStatus | Statustext }}</div>
          </div>
          <div class="deliveryDate" v-if="
              item.reservationStatus == '0'
            ">
            <div>前面还有:</div>
            <div class="wait">{{ waitNum}}位</div>
          </div>
          <div class="deliveryDate">
            <div>收货口:</div>
            <div>{{ item.reservationNum | statusReservationNum }}</div>
          </div> -->
          <!-- <div class="timeslotItem">预约时间段:{{item.startSlot}}~{{item.endSlot}}</div> -->
          <div class="btnlayout">
            <van-button
              round
              type="warning"
              size="normal"
              :disabled="item.reservationStatus == '6'"
              @click="handleCancel(item.id)"
              >取消预约</van-button
            >
            <van-button
              round
              type="primary"
              size="normal"
              @click="handlerefresh"
              >刷新页面</van-button
            >
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { mapGetters } from "vuex";
import {
  updateReservation,
  listReservation,
  getReservationByPhonelist,
  getWaitNum,
} from "@/api/system/reservation";
import { Dialog } from "vant";
export default {
  dicts: ["reservation_status", "goods_type"],
  data() {
    return {
      historyList: [],
      // 货物类型
      goodsColumns: [],
      that: this,
      ckwaitNum: "",
      ytwaitNum:"",
      // username: this.$route.query.username,
      // iphone: this.$route.query.iphone,
    };
  },
  created() {
    this.getDicts("goods_type").then((response) => {
      console.log(response.data);
      response.data.forEach((item) => {
        this.goodsColumns.push({
          value: item.dictValue,
          label: item.dictLabel,
        });
      });
      console.log(this.goodsColumns);
    });
  },
  filters: {
    Statustext(value) {
      if (value === "0") {
        return "已预约";
      } else if (value === "1") {
        return "已签到";
      } else if (value === "2") {
        return "审核通过";
      } else if (value === "3") {
        return "预分配";
      } else if (value === "4") {
        return "已分配";
      } else if (value === "5") {
        return "收货完成";
      } else if (value === "6") {
        return "已取消";
      }
    },
    // statusGoodstype(value) {
    //   if (value === "0") {
    //     return "西药";
    //   } else if (value === "1") {
    //     return "中药饮片";
    //   } else if (value === "2") {
    //     return "冷链";
    //   } else if (value === "3") {
    //     return "器械";
    //   }
    // },
    statusGoodstype(value, that) {
      const dict = {};
      that.goodsColumns.forEach((item) => {
        dict[item.value] = item.label;
      });
      return dict[value] || value;
    },
    statusReservationNum(value) {
      if (value == null) {
        return "暂无";
      } else {
        return value;
      }
    },
  },
  computed: {
    // ...mapGetters(["historyList", "driver"]),
    ...mapGetters(["driver"]),
  },
  mounted() {
    this.getReservationUser();
  },
  methods: {
    handlerefresh() {
      getReservationByPhonelist({ phone: this.driver }).then((res) => {
        this.historyList = res.data;
      });
      getWaitNum({ phone: this.driver }).then((res) => {
        this.ckwaitNum = res.data.ckNum;
        this.ytwaitNum=res.data.ytNum;
      });
    },
    getReservationUser() {
      getReservationByPhonelist({ phone: this.driver }).then((res) => {
        this.historyList = res.data;
        console.log(res.data);
      });
      getWaitNum({ phone: this.driver }).then((res) => {
        this.ckwaitNum = res.data.ckNum;
        this.ytwaitNum=res.data.ytNum;
      });
    },
    handleCancel(item) {
      Dialog.confirm({
        title: "确认取消预约吗？",
      })
        .then(() => {
          updateReservation({  id: item, reservationStatus: "6" }).then((res) => {
            this.getReservationUser();
          });
        })
        .catch(() => {
          Dialog.close();
        });
    },
    // handleSignin(id) {
    //   Dialog.confirm({
    //     title: "入园签到确认",
    //     message: "请确认是否已进入园区",
    //   })
    //     .then(() => {
    //       updateReservation({ id: id, reservationStatus: "1" }).then((res) => {
    //         this.getReservationUser();
    //       });
    //     })
    //     .catch(() => {
    //       Dialog.close();
    //     });
    // },
    handleCreate() {
      // this.$router.push("/resetView");
      this.$router.push({
        path: "/resetView",
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.create-reset {
  box-sizing: border-box;
  width: 100%;
  min-height: 100%;
  // background-color: #f8f8f8;
  background: url("../assets/images/floor.png") no-repeat;
  background-size: 100% 120%;
  background-position: center; /* 将背景图向上移动50% */
  .item {
    display: flex;
    flex-direction: column;
    padding: 15px 20px;
    .resetButton {
      // margin-top: 3rem;
      width: 100%;
      background: linear-gradient(to bottom, #59baff, #98c8e5);
      border-radius: 6px;
      height: 80px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 20px;
      .van-icon-arrow:before {
        color: #fff;
        font-size: 18px;
      }
      .left {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        .van-icon-add:before {
          display: block;
          color: #fff;
          font-size: 18px;
        }
        .text {
          font-size: 16px;
          color: #fff;
          margin-left: 10px;
        }
      }
    }
    .resetInfo {
      font-size: 14px;
      margin-top: 10px;
      width: 100%;
      .itembox {
        min-height: 165px;
        border-radius: 6px;
        // background-color: #ffffff;
        background-color: #4fb8fd;
        padding: 20px 10px;

        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        .deliveryContent {
          display: flex;
          justify-content: space-between;
          .deliveryLeft {
            letter-spacing: 1px;
            width: 50%;
            height: 100%;
            color: #fff;
            margin-left: 5%;
            font-size: 16px;
            .carColor {
              color: #0026ff !important;
            }
          }
        }

        .softNum {
          position: absolute;
          right: 12px;
          top: 10px;
          font-weight: 700;
          font-size: 18px;
          width: 36px;
          height: 36px;
          line-height: 36px;
          text-align: center;
          border-radius: 50%;
          color: #fdac4e;
          border: 1px solid #fcb868;
        }
        .deliveryDate {
          margin-bottom: 10px;
          display: flex;
          .wait {
            color: #fd3300;
            font-weight: 700;
          }
        }
        .timeslotItem{
            font-size: 16px;
            color: #fff;
            padding-left: 5%;
        }
        .btnlayout {
          display: flex;
          height: 43px;
          padding: 10px 55px 0 30px;
          justify-content: space-between;
          align-items: center;
        }
        .van-button--plain.van-button--info {
          margin-right: 10px;
        }
      }
    }
  }
}
</style>